<template>
  <van-skeleton title :row="10" :loading="loading"
  >
    <div class="governmentDetails-wrap">
      <div class="details-wrap">
<!--        <van-image-->
<!--            height="30rem"-->
<!--            width="100%"-->
<!--            :src="`${fileUrl}/${detail?.mainImageId}`"-->
<!--            fit="cover"-->
<!--        />-->
        <van-swipe v-if="getImages().length" class="my-swipe" :autoplay="3000" indicator-color="white" >
          <van-swipe-item v-for="(item, index) in getImages()" :key="index">
            <van-image
                fit="cover"

                        height="30rem"
                        width="100%"
                class="img" :src="`${fileUrl}/${item}`" @click="()=>{handelswip(index)}" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="main-header">
        <div class="header-top">
          <span>{{ detail?.organizationName }}</span>
          <div class="unit-box" @click="onNavi">
            <img class="icon" :src="AddressIcon" mode="scaleToFill"/>
            <div>单位地址: {{ detail?.organizationAddress }}</div>
          </div>
        </div>
        <div class="line">
          <!-- <div style="height: 10px"></div> -->
          <div style="font-weight: bold; padding: 8px">单位信息</div>
          <div >
            <div v-html="detail?.organizationDetail" class="htmlDetail"></div>
          </div>
        </div>
      </div>
    </div>
  </van-skeleton>

  <van-action-sheet
      v-model:show="show"
      :actions="actions"
      @select="(e) => onSelect(e, {
        ...detail,
        address:detail.organizationAddress,
        scenicAreaName:detail.organizationName,

      },true)"
      cancel-text="取消"
      close-on-click-action
  />
</template>
<script setup lang="ts">
import api from '@/api/index';
import AddressIcon from '@/assets/address.png';
import {ref} from 'vue';
import {useRoute} from 'vue-router';
import {callWxNavi, isMiniProgram} from '@/utils/wx-utils.ts';
import {showImagePreview} from "vant";
import {useActionSheet} from "@/hooks/useNavigation.js";

const fileUrl = import.meta.env.VITE_FILE_URL;

const route = useRoute();
const detail = ref(null);

const loading = ref(false);

loading.value = true;

function getDetail() {
  api
      .getGovernDetail(null, route.query.id)
      .then((res) => {
        if (res.code == '200') {
          detail.value = res.data;
        }
      })
      .finally(() => {
        loading.value = false;
      });
}

const {show, actions, navigationClick, onSelect} = useActionSheet()

function onNavi() {
  console.log('govern detail onNavi',detail.value)

  if (isMiniProgram()) {

    callWxNavi({
      lat: Number.parseFloat(detail.value.latitude),
      log: Number.parseFloat(detail.value.longitude),
      address: detail.value.organizationAddress,
      redirectUrl: location.href,
    });
  } else {
    navigationClick()
  }
}

getDetail();


function  getImages (){
  return [
    detail.value?.mainImageId,
      ...( detail.value?.turnImageId ?detail.value.turnImageId.split(','):[])
  ];
}
function handelswip(index) {
  showImagePreview({
    images:getImages().map(item => `${fileUrl}/${item}`),
    startPosition:index
  });
}
</script>
<style scoped lang="scss">
.governmentDetails-wrap {
  overflow: scroll;
  height: 100vh;
  width: 100%;
  background: #fff;
  position: relative;

  .details-wrap {
    height: 180px;
    // background: red;
    .img {
      width: 100%;
      height: 100%;
    }
  }

  .main-header {
    position: absolute;
    top: 25rem;
    min-height: 100px;
    width: 100%;
    background: #fff;
    z-index: 10;
    // background: #eee;
    border-top-right-radius: 18px;
    border-top-left-radius: 18px;

    .header-top {
      padding: 10px;
      box-sizing: border-box;

      .unit-box {
        margin-top: 5px;
        display: flex;
        align-items: center;
        font-size: 12px;

        .icon {
          width: 18px;
          height: 18px;
        }
      }
    }

    .line {
      width: 100%;
      height: 1px;
      background: #eee;
    }

    // background: rebeccapurple;
  }
}

.htmlDetail {
  padding-left: 10px;
  padding-right: 10px
}

.htmlDetailTitle {
  font-weight: bold;
}
</style>
